<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>Document</title>
		<style>
			* {
				margin: 0;
				padding: 0;
			}

			#waveCanvas1 {
				transform-origin: bottom;
				transform: rotateX(180deg);
			}
		</style>
	</head>

	<body>
		<canvas id="waveCanvas1" width="1500" height="140"></canvas>
		<script>
			var waveCanvas1 = document.querySelector('#waveCanvas1');
			waveCanvas1.width = waveCanvas1.parentNode.offsetWidth; //画布宽度等于父元素宽度
			// waveCanvas1.height = waveCanvas1.parentNode.offsetHeight;

			var waveTop = 0; //波浪距离画布顶部
			var x = 0; //开始X轴坐标

			var width = waveCanvas1.offsetWidth / 6; //两个波峰相差的宽度
			var height = 30; //两个波峰相差的高度

			function goWave() {
				x -= 10; //向左侧移动
				if (x < -width * 4) {
					x = 0;
				}
				var ctx = waveCanvas1.getContext('2d');
				ctx.clearRect(0, 0, waveCanvas1.offsetWidth, waveCanvas1.offsetHeight);
				ctx.beginPath();
				ctx.moveTo(x, height + waveTop); //移动到左上角

				ctx.quadraticCurveTo(x + width * 1, waveTop, x + width * 2, height + waveTop);
				ctx.quadraticCurveTo(x + width * 3, height * 2 + waveTop, x + width * 4, height + waveTop);

				ctx.quadraticCurveTo(x + width * 5, waveTop, x + width * 6, height + waveTop);
				ctx.quadraticCurveTo(x + width * 7, height * 2 + waveTop, x + width * 8, height + waveTop);

				ctx.quadraticCurveTo(x + width * 9, waveTop, x + width * 10, height + waveTop);
				ctx.lineTo(x + width * 10, waveCanvas1.offsetHeight); //移动到右下角
				ctx.lineTo(x, waveCanvas1.offsetHeight); //移动到左下角
				ctx.closePath();

				ctx.fillStyle = '#0f4f3f';
				ctx.stroke();
				ctx.fill();
			}
			setInterval(goWave, 50);
		</script>
	</body>

</html>
